
import { 
  AmbientLight,
  AxesHelper,
  BufferGeometry,
  EllipseCurve,
  Line,
  LineBasicMaterial,
  LineDashedMaterial,
  PerspectiveCamera, Scene, sRGBEncoding, Vector3, WebGLRenderer 
} from "three"
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'
import stats from '../utils/stats'

const scene = new Scene()
const camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)
camera.position.set(-34, -95, 26)
camera.lookAt(0, 0, 0)

const curve = new EllipseCurve(
  // aX 椭圆的中心的X坐标，默认值为0 
  0, 
  // aY 椭圆的中心的Y坐标，默认值为0
  0,
  // xRadius X轴向上椭圆的半径，默认值为1
  10, 
  // yRadius – Y轴向上椭圆的半径，默认值为1
  10,
  // aStartAngle – 以弧度来表示，从正X轴算起曲线开始的角度，默认值为0
  0, 
  // aEndAngle – 以弧度来表示，从正X轴算起曲线终止的角度，默认值为2 x Math.PI
  Math.PI * 2,
  // aClockwise – 椭圆是否按照顺时针方向来绘制，默认值为false
  false,
  // aRotation – 以弧度表示，椭圆从X轴正方向逆时针的旋转角度（可选），默认值为0。
  0
)
const points = curve.getPoints(100)
const geometry = new BufferGeometry().setFromPoints(points)

const material = new LineDashedMaterial({
  // 由于OpenGL Core Profile与 大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1。
  linewidth: 1,
  // 定义线条的整体颜色，优先级低于 开启 vertexColors 后的自定义颜色
  color: 0xffff00,
  // 短划线的长度
  dashSize: 1,
  // 间隔的长度
  gapSize: 0.5,
  // 缩放
  // 如果 scale 小于 1 dashSize 就会增大
  // 如果 scale 大于 1 dashSize 就有缩小
  scale: 2
})
const lineMaterial = new LineBasicMaterial({ color: 0xff0000 })
const line = new Line(geometry, material)
line.computeLineDistances()
line.position.set(0, 5, 0)
scene.add(line)

scene.add(new AmbientLight(0xffffff))

// 添加坐标系，方便理解
const axes = new AxesHelper(20)
scene.add(axes)

const renderer = new WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.outputEncoding = sRGBEncoding

document.body.appendChild(renderer.domElement)
const trackballControls = new TrackballControls(camera, renderer.domElement)

function render() {
  stats.update()
  trackballControls.update()

  line.rotation.z += 0.01
  
  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

render()